<template>
	<view class="wrap" v-if="JSON.stringify(pNoteInfo) !== '{}'">
		<view class="userInfo">
			<view class="userInfo-L">
				<view class="userInfo-img">
					<u-avatar v-if="pNoteInfo.subscriber" :src="pNoteInfo.subscriber.avatar" size="80"></u-avatar>
				</view>
				<view class="userInfo-d">
					<view class="userInfo-name" v-if="pNoteInfo.subscriber">{{pNoteInfo.subscriber.nick}}</view>
					<view class="userInfo-date">{{pNoteInfo.createTime}}</view>
				</view>
			</view>
			<view class="endTime" :class="{end: !pNoteInfo.remainTimeStr}" v-if="pNoteInfo.purchaseStatus == 0">
				<text v-if="!pNoteInfo.remainTimeStr">已结束</text>
				<text v-else>距结束: {{pNoteInfo.remainTimeStr}}</text>
			</view>
			<view class="endTime finished" :class="{end: !pNoteInfo.remainTimeStr}" v-if="pNoteInfo.purchaseStatus == 1">
				<text v-if="!pNoteInfo.remainTimeStr">已结束</text>
				<text v-else>已报价</text>
				<!-- <text>已报价</text> -->
			</view>
			<view class="endTime finished" v-if="pNoteInfo.purchaseStatus == 2">
				<text>已完成</text>
			</view>
			<view class="endTime" v-if="pNoteInfo.purchaseStatus == 3">
				<text>已结束</text>
			</view>
		</view>
		<view class="article">
			<view class="article-title">{{pNoteInfo.productName}}</view>
			<view class="article-content">{{pNoteInfo.description || ''}}</view>
			<view class="article-img">
				<view class="article-img_item" v-for="(item, index) in pNoteInfo.images" :key="index">
					<!-- <image :src="item" mode="cover"></image> -->
					<u-image :src="item" width="220rpx" height="220rpx" @click="previewImg"></u-image>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="detail-header">详细信息</view>
			<view class="detail-main">
				<view class="detail-item">
					<view>采购数量</view>
					<view>{{pNoteInfo.number + pNoteInfo.numberUnit}}</view>
				</view>
				<view class="detail-item">
					<view>价格范围</view>
					<view>{{pNoteInfo.minPrice}}-{{pNoteInfo.maxPrice}}{{pNoteInfo.priceUnit}}</view>
				</view>
				<view class="detail-item">
					<view>有效期至</view>
					<view>{{pNoteInfo.validTime}}</view>
				</view>
				<view class="detail-item">
					<view>是否定做</view>
					<view>{{pNoteInfo.isCustomize === 0 || pNoteInfo.isCustomize === '0' ? '是' : '否'}}</view>
				</view>
			</view>
		</view>
		<view class="myPcN" v-if="shopList.length > 0">
			<view class="myPcN-header">我的报价</view>
			<view class="myPcN-main" v-for="(item, index) in shopList" :key="index">
				<view class="myPcN-store app_arrow" @click="onSkipTap('storeInfo')">
					<view class="myPcN-storeImg">
						<image :src="item.shopIcon" mode=""></image>
					</view>
					<view class="myPcN-storeName">{{item.shopName}}</view>
					<view class="myPcN-storeStar">
						<image src="../../static/images/icon-level2.png" mode="" style="width: 26rpx;height: 22rpx;">
						</image>
						<image src="../../static/images/icon-level2.png" mode="" style="width: 26rpx;height: 22rpx;">
						</image>
					</view>
				</view>
				<view class="myPcN-goods" v-if="item.quotedType == 1">
					<view class="myPcNitem">
						<view class="myPcNitem-img">
							<image src="../../static/images/img-goods.jpg" mode=""></image>
						</view>
						<view class="myPcNitem-main">
							<view class="myPcNitem-title">{{item.productName}}</view>
							<view class="myPcNitem-mainB">
								<view class="myPcNitem-mainB_L">
									<text>￥{{item.salesPrice}}/{{item.priceUnit}}</text>
									<text>（{{item.grap}}）</text>
								</view>
								<view class="myPcNitem-mainB_R">月销{{item.saleNum}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="myPcN-priceWrap" v-if="item.quotedType == 0">
					<view class="myPcN-priceItem">
						<view class="myPcN-priceInfo">
							<text>￥{{item.bulkGoodsPrice}}</text>
							<text>{{pNoteInfo.priceUnit}}</text>
							<text>({{item.grap}})</text>
						</view>
						<view class="myPcN-priceType">大货价格</view>
					</view>
					<view class="myPcN-priceItem">
						<view class="myPcN-priceInfo">
							<text>￥{{item.cutSamplePrice}}</text>
							<text>{{pNoteInfo.priceUnit}}</text>
						</view>
						<view class="myPcN-priceType">剪样价格</view>
					</view>
				</view>
				<view class="myPcN-img" v-if="item.quotedType == 0">
					<image v-for="(val, idx) in item.images" :src="val" mode=""
						@click="previewImgBase(item.images, val)"></image>
				</view>
			</view>
		</view>
		<view class="submitBar" v-if="pNoteInfo">
			<view class="submitBar-phone" @click="makePhoneCall">
				<image src="../../static/images/icon-phone.png" mode=""></image>
				<text>拨打电话</text>
			</view>
			<view class="submitBar-btn">
				<view
					v-if="(pNoteInfo.purchaseStatus == 0 || pNoteInfo.purchaseStatus == 1) && pNoteInfo.remainTimeStr&&shopList.length==0"
					class="submitBar-btn_bj" @click="onSubmitTap">立即报价</view>
				<view v-else-if="pNoteInfo.purchaseStatus == 1&& pNoteInfo.remainTimeStr&&shopList.length>0"
					class="submitBar-btn_bj" style="opacity: 0.5;">已报价</view>
				<view v-else class="submitBar-btn_bj" style="opacity: 0.5;">停止报价</view>
				<!-- <g-btn  title="立即报价"
					:customstyle="{width: '330rpx', height: '70rpx', opacity: '1'}"
					@click="onSubmitTap">
				</g-btn> -->
			</view>
		</view>

		<u-popup v-model="showQuotation" border-radius="16" mode="bottom">
			<view class="quotationPop">
				<view class="quotationItem" @click="onSkipTap('customTakeOrder')">自定义报价</view>
				<view class="quotationItem" @click="onSkipTap('goodsListSelect')">选择商品报价</view>
				<view class="quotationCancel" @click="showQuotation = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showQuotation: false,
				purchaseId: '',
				pNoteInfo: {},
				shopList: []
			}
		},
		onLoad(options) {
			this.purchaseId = options.purchaseId
			this.updatePage()
		},
		onUnload() {
			uni.$off('update-purchaseNote', this.updatePage)
		},
		methods: {
			updatePage() {
				this.getDetail()
				this.getShops()
			},
			onSkipTap(type, params) {
				let urlObj = {
					customTakeOrder: () => {
						this.showQuotation = false
						uni.$off('update-purchaseNote', this.updatePage)
						uni.$on('update-purchaseNote', this.updatePage)
						uni.navigateTo({
							url: `/pages/takeOrder/customTakeOrder?purchaseId=${this.purchaseId}`
						})
					},
					goodsListSelect: () => {
						this.showQuotation = false
						uni.$off('update-purchaseNote', this.updatePage)
						uni.$on('update-purchaseNote', this.updatePage)
						uni.navigateTo({
							url: `/pages/takeOrder/goodsListSelect?purchaseId=${this.purchaseId}`,
						})
					},
					storeInfo: '/pages/shopInfo/storeInfo',
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getDetail() {
				this.$g_api.purchaseDetails({
					purchaseId: this.purchaseId
				}).then(({
					data
				}) => {
					console.log(data);
					console.log('hahahaha');
					try {
						data.remainTimeStr = this.calcRemainingTime(data.validTime)
						data.images = this.$g_util.concatRequestUrl(data.images)
						if (data?.subscriber?.avatar) {
							data.subscriber.avatar = this.$g_util.concatRequestUrl(data.subscriber.avatar)
						}
					} catch (e) {
						console.log(e);
						//TODO handle the exception
					}

					console.log(data);
					this.pNoteInfo = data
				})
			},
			/**
			 * 计算结束时间
			 */
			calcRemainingTime(validDate) {
				if (!validDate) return 0
				validDate = validDate.replace(/-/g, '/')
				const now = Math.floor(new Date().getTime() / 1000)
				const validTime = Math.floor(new Date(validDate).getTime() / 1000)
				const diff = validTime - now
				if (diff <= 0) {
					return 0
				}
				const day = 24 * 60 * 60
				const hour = 60 * 60
				const minute = 60
				if (diff <= 60) {
					return `1分钟`
				}
				if (diff <= hour) {
					return `${Math.floor(diff / 60)}分钟`
				}
				if (diff <= day) {
					return `${Math.floor(diff/60/60)}小时`
				}
				const dayStr = Math.floor(diff / day)
				const hourStr = Math.floor((diff - day * dayStr) / 60 / 60)

				return `${dayStr}天${hourStr}小时`

			},
			getShops() {
				this.$g_api.purchaseShops({
					purchaseId: this.purchaseId
				}).then(async ({
					data
				}) => {
					let shopList = []
					if (this.gUserInfo?.shopId) {
						shopList = data.filter(item => item.shopId == this.gUserInfo.shopId)
					} else {
						const userInfo = await this.$store.dispatch('updateUserInfo')
						shopList = data.filter(item => item.shopId == userInfo.shopId)
					}
					console.log(shopList);
					shopList.forEach(item => {
						item.shopIcon = this.$g_util.concatRequestUrl(item.shopIcon)
						item.images = this.$g_util.concatRequestUrl(item.images)
					})
					this.shopList = shopList
				})
			},
			previewImg(index) {
				uni.previewImage({
					urls: this.pNoteInfo.images,
					current: index
				})
			},
			previewImgBase(urls, current) {
				uni.previewImage({
					urls,
					current
				})
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: String(this.pNoteInfo.tel)
				})
			},
			onSubmitTap() {
				const {
					pNoteInfo
				} = this
				if (!pNoteInfo.remainTimeStr) {
					uni.showToast({
						title: '已结束',
						icon: 'none'
					})
					return
				}
				if ((pNoteInfo.purchaseStatus == 0 || pNoteInfo.purchaseStatus == 1) && this.shopList.length == 0) {
					this.showQuotation = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
	}

	.userInfo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		background-color: #fff;
	}

	.userInfo-L {
		display: flex;
		align-items: center;
	}

	.userInfo-img {
		margin-right: 20rpx;
		font-size: 0;
	}

	.userInfo-d {}

	.userInfo-name {
		margin-bottom: 4rpx;
		font-size: 30rpx;
		font-weight: bold;
		word-break: break-all;
	}

	.userInfo-date {
		font-size: 20rpx;
		color: #999;
	}

	.endTime {
		margin-left: 20rpx;
		padding: 14rpx 20rpx;
		line-height: 22rpx;
		border-radius: 40rpx;
		font-size: 20rpx;
		color: #FF7733;
		background-color: #FFEEE5;

		&.finished {
			color: #fff;
			background-color: #3377ff;
		}
		&.end {
			color: #ffffff;
			background-color: #999999 !important;
		}
	}

	.article {
		padding: 20rpx 30rpx 0;
		background-color: #fff;
	}

	.article-title {
		margin-bottom: 32rpx;
		line-height: 1;
		font-size: 36rpx;
		font-weight: bold;
	}

	.article-content {
		font-size: 28rpx;
		padding-bottom: 46rpx;
	}

	.article-img {
		display: flex;
		flex-wrap: wrap;
	}

	.article-img_item {
		margin: 0 14rpx 14rpx 0;
		font-size: 0;

		image {
			width: 220rpx;
			height: 220rpx;
			background-color: #e1e1e1;
		}

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.detail {
		padding: 0 30rpx 50rpx;
		background-color: #fff;
	}

	.detail-header,
	.myPcN-header {
		line-height: 1;
		font-size: 30rpx;
		padding: 30rpx 0;
		font-weight: bold;
	}

	.detail-main {
		padding: 14rpx 0;
		box-shadow: 0px 0px 15rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
	}

	.detail-item {
		display: flex;
		padding: 0 20rpx 0;

		view {
			line-height: 70rpx;

			&:first-child {
				width: 142rpx;
				color: #999;
				font-size: 26rpx;
			}

			&:last-child {
				color: #333;
				font-size: 26rpx;
			}
		}
	}

	.myPcN {
		padding: 0 20rpx 0rpx;
	}

	.myPcN-header {
		padding: 30rpx 10rpx;
	}

	.myPcN-main {
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		background-color: #fff;
	}

	.myPcN-store {
		display: flex;
		align-items: center;
	}

	.myPcN-storeImg {
		font-size: 0;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;
			background-color: red;
		}
	}

	.myPcN-storeName {
		margin: 0 20rpx;
	}

	.myPcN-storeStar {
		display: flex;

		image {
			margin-right: 6rpx;
		}
	}

	.myPcN-goods {
		margin-top: 50rpx;
	}

	.myPcNitem {
		display: flex;
		padding: 30rpx;
		background-color: #f7f7f7;
		border-radius: 10rpx;
		// border-bottom: 1px solid $g-border-color;
		// background-color: #fff;
	}

	.myPcNitem-img {
		width: 140rpx;
		font-size: 0;

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.myPcNitem-main {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.myPcNitem-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.myPcNitem-mainB {
		display: flex;
		justify-content: space-between;
	}

	.myPcNitem-mainB_L {
		text {
			&:first-child {
				color: #FF4C4C;
				font-size: 26rpx;
			}

			&:last-child {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}

	.myPcNitem-mainB_R {
		font-size: 24rpx;
		color: #999;
	}

	.myPcN-priceWrap {
		display: flex;
		padding: 44rpx 0 34rpx;
	}

	.myPcN-priceItem {
		flex: 1;
	}

	.myPcN-priceInfo {
		margin-bottom: 4rpx;

		text {
			&:nth-child(1) {
				font-size: 30rpx;
				color: #FF7733;
			}

			&:nth-child(2) {
				font-size: 18rpx;
				color: #ff7733;
			}

			&:nth-child(3) {
				font-size: 18rpx;
				color: #999;
			}
		}
	}

	.myPcN-priceType {
		font-size: 24rpx;
		color: #999;
	}

	.myPcN-img {
		display: flex;
		flex-wrap: wrap;
		font-size: 0;

		image {
			width: 210rpx;
			height: 210rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			background-color: #ccc;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.submitBar {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 718rpx;
		height: 100rpx;
		padding: 0 16rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0px 0px 15rpx 0px #f7f7f7;
		background-color: #fff;
	}

	.submitBar-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 330rpx;
		height: 70rpx;
		border: 1px solid $g-border-color;
		border-radius: 40rpx;

		image {
			margin-right: 20rpx;
			width: 34rpx;
			height: 34rpx;
			// background-color: red;
		}
	}

	.submitBar-btn_bj {
		background: linear-gradient(90deg, #3377FF, #6699FF);
		width: 330rpx;
		height: 70rpx;
		line-height: 70rpx;
		opacity: 1;
		text-align: center;
		font-size: 32rpx;
		color: #fff !important;
		box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(76, 136, 255, 0.5);
		border-radius: 46rpx;
		border: none;
	}

	.quotationPop {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $g-main-bg;
	}

	.quotationItem {
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.quotationCancel {
		margin-top: 20rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #fff;
	}
</style>
